import React from 'react';

// 下面class的另一种实现形式 在函数组件内部使用 hook 的 useRef 来获取Dom
/* function CustomTextInput(props) {
  // 这里必须声明 textInput，这样 ref 才可以引用它
  const textInput = useRef(null);

  function handleClick() {
    textInput.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
} */

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个 ref 来存储 textInput 的 DOM 元素
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // 直接使用原生 API 使 text 输入框获得焦点
    // 注意：我们通过 "current" 来访问 DOM 节点
    this.textInput.current.focus();
  }

  render() {
    // 告诉 React 我们想把 <input> ref 关联到
    // 构造器里创建的 `textInput` 上
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 由于 CustomTextInput 是自定义组件，这里拿到的组件实例，而非Dom
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focusTextInput();
  }

  render() {
    return (
      // 仅在 CustomTextInput 声明为 class 时才有效
      // 默认情况下，你不能在函数组件上使用 ref 属性，因为它们没有实例
      // 如果要在函数组件中使用 ref，你可以使用 forwardRef（即转发Refs）
      <CustomTextInput ref={this.textInput} />
    );
  }
}

export default class NormalRefs extends React.Component {
  render() {
    return <AutoFocusTextInput />;
  }
}